<template>
  <div class="future-weather">
    <div>
      <h1>{{location.name}}</h1>
      <div class="sstq">
        <p class="sj">{{ now.obsTime }}</p>
        <div class="tbqw">
          <div class="qw">
            <i :class="aaa"></i>
          </div>
          <div class="qw">
            <p class="wd">{{now.temp}}°</p>
            <p class="p">{{now.text}}</p>
          </div>
        </div>
        <div class="as"><br>
          <div class="tb">
            <span>体感温度</span>
            <p>{{now.feelsLike}}</p>
          </div>
          <div class="tb">
            <span>当前湿度</span>
            <p>{{now.humidity}}</p>
          </div>
          <div class="tb">
            <span>大气压强</span>
            <p>{{now.pressure}}</p>
          </div>
          <div class="tb">
            <span>当前风向</span>
            <p>{{now.windDir}}</p>
          </div>
          <div class="tb">
            <span>当前风速</span>
            <p>{{now.windSpeed}}</p>
          </div>
          <div class="tb">
            <span>风力等级</span>
            <p>{{now.windScale}}</p>
          </div>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import "qweather-icons/font/qweather-icons.css"
import axios from "axios";
import { KEY, API_HOST } from "@/common/constrants";
import {mapState} from "vuex"
export default {
  data(){
    return{
      aaa:[],
      now:[],
    }
  },
  watch:{
    location:function(){
      this.getData();
    }
  },
    methods:{
        getData(){
            axios
            .get(API_HOST,{
                params:{
                    location:this.location.id,
                    key:KEY
                }
            }).then(res=>{
                console.log(res.data.now)
                this.now= res.data.now;
                this.aaa= "qi-" + res.data.now.icon
            })
        },

    },
    computed:{
        ...mapState([
            "location"
        ])
    },
    mounted(){
      this.getData()
    }
};
</script>
<style scoped>
*{
  margin: 0;
  padding: 0;
}
h1{
  margin: 3rem 0;
}
.sj{
  text-align:right;
  padding: 1rem 2.5rem;
}
.sstq{
  width: 60rem;
  height: 20rem;
  background-color: #d6dded;
  margin: auto;
  border-radius: 1.5rem;
}
.tbqw{
  margin: 3rem auto;
}
.as{
  width: 55rem;
  height: 5rem;
  background-color: #d0d8e7;
  margin: 3rem auto;
  border-radius: 1.5rem;
}
i{
  font-size: 4rem;
}
.qw,.tb{
  display: inline-block;
}
.qw{
  margin: 0 0.8rem;
}
.p{
  text-align:left;
}
.tb{
  margin: 0 2rem;
}
.wd{
  font-size: 2rem;
}
</style>
